<template>
  <div class="goodsDetail">
    <!-- 顶部轮播图 -->
    <van-swipe>
      <van-swipe-item v-for="item in goodsDetail?.skuInfo.skuImageList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>

    <!-- 红色区域价格 -->
    <div class="ad-price">
      <p class="price-time">
        每日抄底 <span>|</span>
        距离结束
        <van-count-down :time="time" />
      </p>
      <p class="price-title">
        <span>￥</span>{{ goodsDetail?.price }}
        <van-tag round type="primary" color="#ffffff" text-color="#fa1e32">到手￥1999></van-tag>
      </p>
    </div>

    <!-- 商品名称 -->
    <div class="title">
      <p class="name-left">{{ goodsDetail?.skuInfo.skuName }}</p>
      <div class="name-right">
        <p>
          <span>99.5%</span>
          <span>好评率</span>
        </p>
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 自营 -->
    <div class="standard">
      <van-tag round type="primary" color="#fa1e32" text-color="#ffffff">自营</van-tag>
      <van-icon name="thumb-circle-o" size="17" />
      <p>网易严选<span>|</span>泰国进口</p>
    </div>

    <!-- 推荐理由 -->
    <div class="recommend">
      <p class="recommend-title">推荐理由</p>
      <p class="recommend-context">{{ goodsDetail?.skuInfo.skuDesc }}</p>
    </div>

    <!-- 邮费 -->
    <div class="postage-click">
      <van-cell title="邮费: 单件包邮" is-link @click="showPopup" />
      <van-popup v-model:show="show" closeable position="bottom" :style="{ height: '50%' }">
        <!-- 邮费隐藏框 -->
        <div class="postage">
          <p class="postage-title">邮费</p>
          <hr />
          <p class="postage-context">
            本商品由严选合作仓发货，大陆地区免邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准
          </p>
        </div>
      </van-popup>
    </div>

    <!-- 阴影区域 -->
    <div class="shadow"></div>

    <!-- 规格数量 -->
    <div class="specification-click">
      <van-cell title="请选择规格数量" is-link @click="showSizeHandler" />
      <van-popup v-model:show="showSize" closeable position="bottom" :style="{ height: '85%' }">
        <!-- 规格数量隐藏 -->
        <div class="specification">
          <div class="specification-title">
            <img :src="goodsDetail?.skuInfo.skuDefaultImg" alt="" />
            <p>
              <van-tag type="warning">特价</van-tag>
              <span
                >价格: ￥{{ goodsDetail?.skuInfo.price }} 到手￥{{
                  goodsDetail?.skuInfo.price
                }}</span
              >
              <span>请选择:商品规格</span>
            </p>
          </div>
          <div
            class="specification-color"
            v-for="title in goodsDetail?.spuSaleAttrList"
            :key="title.id"
          >
            <p>{{ title.saleAttrName }}</p>
            <p class="tag">
              <span
                class="van-tag"
                :class="{ active: content.isChecked === '1' }"
                v-for="content in title.spuSaleAttrValueList"
                :key="content.id"
                @click="selectGoods(title.spuSaleAttrValueList, content)"
              >
                {{ content.saleAttrValueName }}
              </span>
            </p>
          </div>
          <div class="specification-num">
            <p>数量</p>
            <van-stepper v-model="chooseNum" min="1" max="200" integer />
          </div>
        </div>
      </van-popup>
    </div>

    <hr />

    <!-- 限制 -->
    <div class="astrict">
      <van-cell title="限制: 该商品不可使用优惠券" />
    </div>

    <hr />

    <!-- 配送 点击 -->
    <div class="distribution-click">
      <van-cell title="配送:配送至" is-link @click="showAddressHandler"
        ><span>{{ addressItem }}</span></van-cell
      >
      <van-popup v-model:show="addressShow" position="bottom" :style="{ height: '60%' }">
        <van-area
          title="标题"
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          @cancel="cancelHandler"
          @confirm="confirmHandler"
        />
      </van-popup>
    </div>

    <!-- 阴影区域 -->
    <div class="shadow"></div>

    <!-- 商品参数 -->
    <div class="goods-parameter">
      <p class="title">商品参数</p>
      <p v-for="item in goodsDetail?.skuInfo.skuAttrValueList" :key="item.id">
        <span>{{ item.attrName }}</span> {{ item.valueName }}
      </p>
    </div>

    <!-- 商品详情 图片 -->
    <van-image
      width="375px"
      fit="cover"
      :src="item.imgUrl"
      v-for="item in goodsDetail?.skuInfo.skuImageList"
      :key="item.id"
    />

    <!-- 猜你喜欢 -->
    <div class="goods-like">
      <p><span>——</span>你可能还喜欢<span>——</span></p>
      <ul>
        <li
          class="goods-like-bottom-item"
          v-for="item in goodsDetail?.skuInfo.skuImageList"
          :key="item.id"
        >
          <img :src="item.imgUrl" alt="" />
          <p class="like-name">{{ goodsDetail?.skuInfo.skuName }}</p>
          <van-tag type="danger">可用红包</van-tag>
          <p class="price">￥{{ goodsDetail?.price }}</p>
        </li>
      </ul>
    </div>

    <!-- 立即购买  加入购物车 -->
    <div class="box-submit">
      <ul class="submit">
        <li>
          <van-icon name="service-o" />
        </li>
        <li class="submit-buy" @click="toBuy">立即购买</li>
        <li class="submit-cart" @click="showSizeHandler">加入购物车</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reqAddCart, reqGoodsDetail } from '@/api/categoryList'
import type { IResGoodsDetailData } from '@/types/goodsDetail'
import { onMounted } from 'vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// @ts-ignore
import { areaList } from '@vant/area-data'
import { showToast } from 'vant'

const address = ref()
// 倒计时
const time = ref(24 * 60 * 60 * 1000)
// 步进器
const chooseNum = ref(1)

const router = useRouter()

// 邮费展示与隐藏
const show = ref(false)
// 商品规格展示与隐藏
const showSize = ref(false)
// 选择地址展示与隐藏
const addressShow = ref(false)
// 地址栏回显的数据
const addressItem = ref('')

// 点击展示邮费
const showPopup = (e: any) => {
  show.value = true
}

// 点击展示商品规格  点击购物车
const showSizeHandler = async () => {
  // 判断弹框是否展示
  if (showSize.value) {
    // 解构id
    const spuId = goodsDetail.value?.skuInfo.spuId
    // 调用api 发送请求
    const res = await reqAddCart(spuId, chooseNum.value)
    if (res.code === 200) {
      // 添加购物车成功  关闭弹框
      showSize.value = false
      // 提示
      showToast('添加购物车成功')
    }
  } else {
    // 展示弹框
    showSize.value = true
  }
}

// 点击选择商品规格
const selectGoods = (select: any, selectVal: any) => {
  // 取消功能
  if (selectVal.isChecked === '1') {
    selectVal.isChecked = '0'
    return
  }
  // 排他
  select.forEach((item: any) => {
    item.isChecked = '0'
  })
  selectVal.isChecked = '1'
}

// 点击展示 选择地址
const showAddressHandler = () => {
  addressShow.value = true
}

// 地址栏点击取消
const cancelHandler = () => {
  addressShow.value = false
}
// 地址栏点击确认
const confirmHandler = (selectedValues: any) => {
  // console.log(selectedValues)
  // 地址栏赋值
  address.value = selectedValues.selectedOptions
  addressItem.value = ''
  // 遍历 获取选择的省市区
  address.value.forEach((item: any) => {
    if (item && item.value !== '000000') {
      addressItem.value += item.text + ' '
    }
  })
  // console.log(addressItem.value)
  // 隐藏 地址栏选择
  addressShow.value = false
}

// 商品详情
const goodsDetail = ref<IResGoodsDetailData>()

// 获取商品详情
const getGoodsDetail = async () => {
  // 生成随机数
  const randomId = Math.floor(Math.random() * 24) + 1
  // 调用api
  const res = await reqGoodsDetail(randomId)
  if (res.code === 200) {
    // console.log(res.data)
    // 进行赋值
    goodsDetail.value = res.data
  }
}

// 跳转至订单详情页面
const toBuy = () => {
  router.push('/orderPay')
}

onMounted(() => {
  getGoodsDetail()
})
</script>

<script lang="ts">
export default {
  name: 'GoodsDetailView'
}
</script>

<style lang="less" scoped>
.goodsDetail {
  position: relative;
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .van-swipe-item {
    width: 375px;
    height: 375px;
    background-color: lavender;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 红色区域价格
  .ad-price {
    height: 74px;
    background-color: #fa1e32;
    color: white;
    font-size: 13px;
    margin: 0px;
    .price-time {
      margin: 0px;
      padding: 5px;
      padding-left: 15px;
      box-sizing: border-box;
      .van-count-down {
        display: inline-block;
        color: white;
        font-size: 8px;
      }
    }
    .price-title {
      margin: 0px;
      font-size: 30px;
      font-weight: 700;
      padding-left: 15px;
      box-sizing: border-box;
      span {
        font-size: 20px;
        margin: 0px;
      }
      .van-tag {
        font-size: 15px;
      }
    }
  }
  // 商品名称
  .title {
    display: flex;
    justify-content: space-between;
    margin: 0px;
    font-size: 15px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    .name-left {
      width: 259px;
      font-weight: 700;
    }
    .name-right {
      display: flex;
      justify-content: space-between;
      p {
        display: flex;
        flex-direction: column;
        span {
          display: block;
        }
      }
      .van-icon {
        align-self: center;
      }
    }
  }
  // 自营
  .standard {
    padding-left: 15px;
    box-sizing: border-box;
    .van-icon {
      padding-left: 8px;
    }
    p {
      display: inline-block;
      margin: 0px;
      font-size: 10px;
      color: #c0c0c0;
      padding-left: 8px;
      span {
        padding-left: 6px;
        padding-right: 6px;
      }
    }
  }
  // 推荐理由
  .recommend {
    padding-left: 15px;
    box-sizing: border-box;
    margin-top: 10px;
    height: 60px;
    .recommend-title {
      margin: 0px;
      font-size: 12px;
      color: #a9a6a6;
    }
    .recommend-context {
      width: 345px;
      margin: 0px;
      background-color: #f0f0f0;
      font-size: 10px;
      padding: 10px;
      box-sizing: border-box;
      color: #333;
    }
  }
  // 邮费
  .postage-click {
    margin-top: 20px;
    // 邮费隐藏框
    .postage {
      width: 375px;
      height: 375px;
      background-color: white;
      padding: 15px;
      box-sizing: border-box;
      position: relative;
      // display: none;
      .postage-X {
        position: fixed;
        top: 0;
        right: 0;
      }
      .postage-title {
        text-align: center;
        font-size: 15px;
      }
      .postage-context {
        font-size: 12px;
      }
    }
  }
  // 阴影
  .shadow {
    height: 7px;
    background: #f0f0f0;
  }
  // 规格数量
  .specification-click {
    margin: 0;
    // 规格数量隐藏
    .specification {
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      // display: none;
      background-color: white;
      .specification-title {
        margin: 0px;
        display: flex;
        justify-content: flex-start;
        img {
          width: 99px;
          height: 99px;
        }
        p {
          font-size: 12px;
          padding: 15px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          .van-tag {
            width: 25px;
            height: 12px;
          }
          span {
            padding-top: 5px;
          }
        }
      }
      .specification-color {
        margin: 0px;
        font-size: 15px;
        padding-left: 15px;
        box-sizing: border-box;
        .tag {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
        }
        .van-tag {
          width: 80px;
          height: 40px;
          text-align: right;
          margin-left: 15px;
          margin-top: 10px;
          border: #e3e1e1 1px solid;
          color: #312c2d;
        }
      }
      .specification-num {
        margin: 0px;
        font-size: 15px;
        padding: 15px;
        box-sizing: border-box;
      }
    }
  }
  .distribution-click {
    margin: 0px;
  }
  hr {
    margin: 0px;
  }
  // 限制
  .astrict {
    margin: 0px;
  }
  // 商品参数
  .goods-parameter {
    font-size: 13px;
    padding-left: 15px;
    box-sizing: border-box;
    .title {
      height: 35px;
      line-height: 35px;
      padding: 0px;
    }
    p {
      height: 18px;
      border-bottom: #c0c0c0 1px dashed;
      line-height: 16px;
      span {
        color: #999;
        padding-right: 25px;
        box-sizing: border-box;
      }
    }
  }

  // 猜你喜欢
  .goods-like {
    p {
      text-align: center;
      font-size: 15px;
      span {
        color: #e3e1e1;
      }
    }
    ul {
      width: 365px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;
      .goods-like-bottom-item {
        padding-left: 10px;
        width: 172px;
        margin-bottom: 15px;
        img {
          width: 172px;
          height: 172px;
        }
        .like-name {
          margin: 0px;
          font-size: 12px;
          margin-top: 2px;
          text-align: left;
        }
        .van-tag {
          margin: 0px;
        }
        .price {
          margin: 0px;
          margin-top: 2px;
          color: red;
          font-weight: 700;
          font-size: 20px;
          text-align: left;
          span {
            font-size: 20px;
          }
        }
        .price-bottom {
          font-weight: 700;
          margin: 0px;
        }
      }
    }
  }
  .box-submit {
    height: 52px;
  }
  // 最下面 加入购物车 提交订单
  .submit {
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
    z-index: 99999;
    li {
      height: 50px;
      font-size: 15px;
      line-height: 50px;
      text-align: center;
      background: white;
      border: #c0c0c0 1px solid;
      .van-icon {
        width: 70px;
        font-size: 20px;
      }
    }
    li.submit-cart {
      background-color: #fa1e32;
    }
    li.submit-buy {
      border-top: #c0c0c0 1px solid;
      border-bottom: #c0c0c0 1px solid;
    }
    li.submit-buy,
    li.submit-cart {
      width: 150px;
    }
  }
  .active {
    border: #fa1e32 2px solid !important;
    border-radius: 5%;
  }
}
</style>
